<template>
    <page>
        <p class="h40 px12 f14 white tc" style="background-color: #faad14">储值卡的预留手机号必须和会员绑定的手机号一致</p>
        <m-group gutter="0">
            <m-cell label="发卡油站" :required="true" isLink @click.native="showShopList = true">
                <span class="nowrap fitw text2 absfit" v-if="form.shopName">{{form.shopName}}</span>
                <span class="nowrap fitw text3" v-else>请选择油站</span>
            </m-cell>
        </m-group>

        <m-group v-if="!isEmpty(form.shopId)">
            <m-cell label="卡号" :required="true" is-link @click.native="showCarList = true">
                <span v-if="form.cardCode">{{form.cardCode}}</span>
                <span class="text3" v-else>选择储值卡</span>
            </m-cell>
        </m-group>
        <m-group>
            <m-cell label="手机号" is-link v-if="isEmpty(userInfo.mobile)" :required="true" :link="{name: 'phoneBind'}">
                <span slot="right" class="text3">点击绑定手机</span>
            </m-cell>
            <m-cell label="手机号" v-else :required="true">{{userInfo.mobile}} <span slot="right" class="c3">已绑定</span></m-cell>
            <m-input-code label="验证码" :required="true" v-model="form.code" :updateCode="getCode"></m-input-code>
        </m-group>

        <m-button class="mx12 mt40" :class="{disabled: notYet}" @click.native="submit">添加</m-button>

        <!-- 选择门店弹窗 begin-->
        <popup-show-list v-model="form.shopId" :show.sync="showShopList" :name.sync="form.shopName"></popup-show-list>
        <!-- 选择门店弹窗 end-->

        <!-- 未绑定的储值卡 begin-->
        <div v-transfer-dom>
            <popup v-model="showCarList" max-height="50%" style="background-color: white">
                <div class="ofay fit">
                    <template v-if="carList.length">
                        <div v-for="(i, index) in carList"
                             class="itemCard mx12 mt10 corner pl50" flex="dir:top main:center"
                             @click="onSelectCar(i)">
                            <p class="f22">{{i.name}}</p>
                            <p class="f22" flex="main:justify">{{i.code}} <span class="c7 mr20">￥{{i.cardje}}</span></p>
                            <!--<p>{{i.cardje}}</p>-->
                        </div>
                        <div class="mt10"></div>
                    </template>
                    <p class="tc text2 h54 f20" v-else>没有可以储值卡</p>
                </div>
            </popup>
        </div>
        <!-- 未绑定的储值卡 end-->
    </page>
</template>
<script>
  import popupShowList from '@/components/form/popupSelect/shop'
  import urljoin from 'url-join'
  import checker, { required, phone } from '@/utils/checker'
  import { closePop } from '@/utils/tiny'
  export default {
    data () {
      return {
        showCarList: false, // show储值卡列表
        showShopList: false, // show门店列表
        carList: [],
        form: {
          cardCode: null,
          id: null,
          code: null,
          shopName: null,
          mobile: this.$store.getters.userInfo.mobile,
          shopId: null
        }
      }
    },
    computed: {
      notYet () {
        const {id, code, shopId} = this.form
        return isEmpty(id) || isEmpty(this.userInfo.mobile) || isEmpty(code)
      },
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    created () {

    },
    methods: {
      PitsPullData () {},
      PitsPushData () {},
      /* 获取未绑定储值卡列表
      *
      *  这里查询未绑定储值卡,但是 stupid back end 给我返回全部的储值卡,说他那边不能操做过滤出未绑定储值卡，shit,
      *  这里通过获取 “全部储值卡” 和 “已绑定储值卡” 两个接口,过滤出 "未绑定储值卡" shit
      * */
      async getCarList () {
        const {shopId, mobile} = this.form
        const shopList = await $g.shopListAsync()
        const { clientUrl } = shopList.find(x => x.id == shopId)
        let r = this.$get_loading(urljoin(clientUrl,'/card/getCardByMobile'), {mobile}).then(r => r.obj || [])
        let r2 = this.$get_loading('iccard/getBandCard', {mobile}).then(r => r.obj || [])
        const [allList, alreadyList] = await Promise.all([r, r2])
        this.carList = allList.filter(x => !alreadyList.some(y => y.cardCode == x.code))
      },
      // 选择卡
      onSelectCar ({id, code}) {
        this.form.id = id
        this.form.cardCode = code
        this.showCarList = false
      },
      // 验证 接收验证码是否正确
      async checkerCode () {
        let {obj} = await this.$post_loading('member/checkCode', {
          code: this.form.code
        })
        if (!obj) {
          m_alert('验证码错误')
          throw '验证码错误'
        }
      },
      // 获取验证码
      async getCode (next) {
        const {shopId, id,mobile, code} =  this.form
        const checkerShop = [shopId, required('请选择油站')]
        const checkercardCode = [id, required('请选择储值卡卡号')]
        const checkerPhone = [mobile, required('请绑定手机')]
        if (!checker(checkerShop, checkercardCode, checkerPhone)) return
        next()
        let body = await this.$post('member/sendMobile', {mobile})
      },
      async submit () {
        await this.checkerCode()
        const {cardCode, shopId, shopName, mobile} =  this.form
        let {code, obj} = await this.$post_loading('iccard/addBandCard', {cardCode, shopId, shopName, mobile})
        if (obj) {
          m_toast('绑卡成功')
          this.$router.back()
        } else {
          m_toast('绑卡失败')
        }
      },
      closePop () {
        return closePop(this, 'showCarList', 'showShopList')
      }
    },
    beforeRouteLeave (to, from, next) {
      next(this.closePop())
    },
    watch: {
      'form.shopId' (v) {
        this.getCarList()
      }
    },
    components: {
      popupShowList
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .itemCard {
        position: relative;
        height: 80px;
        // background-color: #ec7a7c;
        color: white;
        overflow: hidden;
        &:before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            content: '';
            background-image: url(./bg.jpg);
            background-size: cover;
            background-position: center;
            z-index: -1;
            filter: blur(3px);
        }
    }
</style>
